/* eslint-disable @typescript-eslint/no-unused-vars */
// @ts-nocheck
import React, { FC, useEffect, useState } from 'react'
import style from '@/style/articles/content.module.scss'
import { useTranslation } from 'react-i18next'
// import axios from '@/api/request'
import {
  HeartOutlined,
  ShareAltOutlined,
  EyeOutlined
} from '@ant-design/icons'
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
const Content: FC = () => {
  // 当前数据
  const [data, setData] = useState([])
  const { t } = useTranslation()
  const arr = useSelector(state => {
    return state.data
  })
  const navigate: any = useNavigate()
  useEffect(() => {
    setData(arr)
  })
  // 转换时间
  const times: FC = (t) => {
    const n = new Date().getTime() - new Date(t).getTime()
    const day = n / 3600 / 1000 / 24
    return Math.floor(day)
  }
  return <div className={style.con}>
    <div>
      {
        (data.length > 0)
          ? data.map((item, index) => {
            return <div key={index} className={style.box} onClick={() => navigate('/detail', { state: item })}>
            <div className={style.top}>
              <h3>{item.title}</h3>
              <span>|</span>
              <p>{times(item.createAt)}天前</p>
              <span>|</span>
              {/* <p>{item.category.label}</p> */}
            </div>
            <div className={style.bot}>
              <img src={item.cover} />
              <div className={style.bots}>
                <HeartOutlined />
                <p>{item.likes}</p>
                <span>.</span>
                <EyeOutlined />
                <p>{item.views}</p>
                <span>.</span>
                <ShareAltOutlined />
                <p>分享</p>
              </div>
            </div>
          </div>
          })
          : <div className={style.data}>{t('NoData')}</div>
      }
    </div>
  </div>
}

export default Content
